<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 组件</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <my-component></my-component>
        <my-component></my-component>
    </div>
</body>

<script type="text/javascript">
    // 注册组件
    // Vue 组件的模板在某些情况下会收到 HTML 限制，例如 <table> 内只允许  <tr>、<th>、<td> 等这些元素
    // template 的 DOM 结构必须被一个元素包含，否则无法渲染. 例如： {{counter}} 就无法渲染
    Vue.component('my-component', {
        template:'<button @click="counter++"> {{counter}} </button>',
        data: function(){
            return {
                counter: 0
            };
        }
    });

    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app"
    })
</script>

</html>